<template>
  <div
    :class="{
      activeBing: bingStore.bingChecked === true ? true : false,
    }"
    :style="{
      background: bingStore.bingChecked === true ? '' : themeConfig.primary,
      opacity: bingStore.bingChecked === true ? '' : '0.8',
      height: '100vh',
    }"
  >
    <BingChange />

    <LoginForm />

    <SvgWaves />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useThemeStore } from "@/stores/models/theme";
import BingChange from "@/views/login/components/change/Index.vue";
import LoginForm from "@/views/login/components/form/Index.vue";
import SvgWaves from "@/views/login/components/svg/Index.vue";
import { useBingStore } from "@/stores/models/bing";

const bingStore = useBingStore();
const themeStore = useThemeStore();
const themeConfig = themeStore.themeConfig;
onMounted(() => {});
</script>
<style scoped lang='scss'>
.activeBing {
  height: 100vh;
  background-image: url(https://bing.img.run/1920x1080.php);
  background-size: cover;
}
</style>